import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class Com extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userList:[],
      uid: ''
    }
  }
  componentDidMount () {
    let uidt = JSON.parse(localStorage.getItem('uid'))
    this.setState({
      uid:uidt
    })
    let uid = JSON.parse(uidt)
    let arrs = []
    fetch(`https://sun.daxunxun.com/api/collect/user?uid=`+uid)
    .then(res => res.json())
    .then(data => {
      // console.log(data)
      for(let i=0; i<data.length;i++){
        // console.log(data[i].f_id)
        let fids = data[i].f_id
        fetch(`https://sun.daxunxun.com/api/food/detail?f_id=`+fids)
        .then(res => res.json())
        .then(data => {
          // console.log(data)
          arrs.push(data)
          this.setState({
            userList:arrs
          })
        })
      }
    })
  }
  // 删除操作
  remove (fid) {
    console.log(fid)
    let uid = this.state.uid
    fetch(`https://sun.daxunxun.com/api/collect/delete?f_id=${fid}&uid=${uid}`)
    .then(res => res.json())
    .then(data => {
      console.log(data)
      let msg = data.message
      alert(msg)
      this.props.history.go()
    })
  }

  render () {
    let cookList = this.state.userList;
    console.log(cookList)   // 一次只出现了一个数据
    let arr = []
    for (let i in cookList) {
      let list = cookList[i]
      for (let j in list) {
        // console.log(list[j])
        let after = list[j]
        arr.push(after)
      }
    }

    return (
      <div className="collection_list">
        <aside>
          <h3>按照食材分类</h3>
          <ul>
            <li>
              <span>全部</span>
              <span>12</span>
            </li>
            <li>
              <span>米饭</span>
              <span>2</span>
            </li>
            <li>
              <span>糖</span>
              <span>2</span>
            </li>
            <li>
              <span>猪小排</span>
              <span>1</span>
            </li>
          </ul>
        </aside>
        <div className="right">
          <ul>
            {
               arr.map((item,index) => {
                 let fid = item.f_id
                 return(
                  <li key={item.f_id}>
                    <Link to={{pathname:'/detail/'+fid}}><img src={item.banner} alt=""/></Link>
                    <Link to={{pathname:'/detail/'+fid}} className="title">{item.name}</Link>
                    <div className="ellipsis">{item.ingredients}</div>
                    <div className="pingfen">
                      综合评分 <strong className="red-font"> {item.score} </strong> （{item.number}做过）
                    </div>
                    <div>
                      <Link className="gray-link" to="/cook/:uid">{item.u_name}</Link>
                    </div>
                    <button className="delete" onClick = {this.remove.bind(this, fid)}>取消收藏</button>
                  </li>
                )
               })
            
             }
          </ul>
        </div>
      </div>
    )
  }
}

export default Com;